<template>
	<view class="LoginPage">
		<view class="title-box">
			<text class="Chinese">雪山和日落</text>
			<text class="English">Best Travel Tool to Discover New</text>
			<text class="English">Possibilites Around the World</text>
		</view>
		<view class="imgBox">
			<image src="https://img.js.design/assets/img/626e8fd3ab0c4902ae7896bc.png" mode="aspectFill"></image>
		</view>
		<view class="loginBox">
			<view class="loginBut" @click="login">
				<image src="../../static/weixin.png" mode=""></image>
				<text>一键登录</text>
			</view>
			<view class="agreement">
				<view class="radio" :class="radio ? 'radio-default' : ''" @click="radio = !radio">
					<view :class="radio ? 'radio-active' : ''"></view>
				</view>
				<text>我已阅读并同意</text>
				<text class="file">《服务协议》</text>
				<text>和</text>
				<text class="file">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import {wxLogin} from '@/config/request/wxLogin.js';
	import {Login} from '@/config/API/login.js';

	const radio = ref(false);

	const login = async () => {
		if (!radio.value) {
			uni.showToast({
				title: '请勾选协议',
				icon: 'error',
				duration: 1000
			});
			return;
		}

		// 定义一个通用的登录函数
		const performLogin = async (position) => {
			uni.showLoading({
				title: '登陆中',
				mask: true,
			});
			try {
				const userCode = await wxLogin.api();
				console.log('用户', userCode);
				const response = await Login({
					code: userCode,
					position: position, 
					friend_id: ''
				});
				console.log('login后端响应:', response);
				if(response.code==200){
					uni.setStorageSync('userInfo', response.data);
					setTimeout(() => {
						uni.hideLoading();
						uni.reLaunch({
							url: '/pages/home/index'
						});
					}, 2000);
				}else{
					uni.showToast({
						title: '登录失败，请稍后再试',
						icon: 'error',
						duration: 2000
					});
				}
			} catch (error) {
				console.error('登录失败', error);
				uni.showToast({
					title: '登录失败，系统错误',
					icon: 'error',
					duration: 2000
				});
			}
		};

		// 获取位置信息
		uni.getLocation({
			type: 'gcj02',
			success: async function(locationRes) {
				const key = 'CPWBZ-OEKC3-ABU3B-RFPL3-A2UM2-TZBBH';
				console.log('用户位置信息：', locationRes);
				const longitude = locationRes.longitude;
				const latitude = locationRes.latitude;
				// 用腾讯地图 API 进行逆地址解析
				const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${key}`;
				uni.request({
					url: url,
					method: 'GET',
					success: async (res) => {
						if (res.data.status === 0) {
							const address = res.data.result.address;
							console.log('逆地址解析结果:', address);
							await performLogin(address); // 将解析后的地址传递到登录函数
						} else {
							console.error('逆地址解析失败', res.data.message);
							await performLogin(''); 
						}
					},
					fail: async (error) => {
						console.error('逆地址解析请求失败', error);
						await performLogin(''); 
					}
				});
			},
			fail: async function(err) {
				console.log('获取位置信息失败：', err);
				await performLogin('');
			}
		});
	};
</script>



<style lang="scss" scoped>
	.LoginPage {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background-color: #edf0f4;

		.title-box {
			margin-top: 12vh;
			margin-left: 60rpx;

			text {
				display: block;
			}

			.Chinese {
				font-size: 72rpx;
				font-weight: 600;
				margin-bottom: 25rpx;
			}

			.English {
				font-size: 32rpx;
				font-weight: 400;
				color: #6c6e70;
			}
		}

		.imgBox {
			width: 758rpx;
			height: 758rpx;
			border-radius: 50%;
			margin: 5vh 0 5vh -160rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.loginBox {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 1vh 0 5vh 0;
			gap: 20rpx;

			.loginBut {
				width: 622rpx;
				height: 112rpx;
				border-radius: 20rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 15rpx;

				image {
					width: 75rpx;
					height: 75rpx;
				}

				text {
					font-size: 36rpx;
					font-weight: 500;
				}
			}

			.agreement {
				display: flex;
				align-items: center;
				gap: 10rpx;
				font-size: 28rpx;

				.radio {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					border: 2rpx solid #cccccc;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.radio-active {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: rgb(118, 163, 218);
				}

				.radio-default {
					border: 2rpx solid rgb(118, 163, 218);
				}

				.file {
					color: rgb(118, 163, 218);
				}
			}
		}
	}
</style>